<script lang="ts" setup>
import { ref } from 'vue'

        let name=ref("zs")
        function updatename(){
            name.value="ww"
        }
    let img1=ref("https://img1.baidu.com/it/u=1077205493,1454513688&fm=253&fmt=auto?w=380&h=380")
    function updateImg(){
        img1.value="https://img0.baidu.com/it/u=2903540042,1917410383&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=475"
    }
    let isBorder=ref(true)
    let mydiv=ref("mydiv")
</script>

<template>

<h3>{{ name }}</h3>  <!-- a -->
 <!-- v-on:click="" -->
 <button @click="updatename">修改名字</button><br>
 <button @click="updateImg">修改图片</button><br>
 <!-- <img v-bind:src="img1" alt=""> -->
    <img :src="img1"><br>
    <!-- <div id="mydiv" :class="{my_border1:isBorder,my_border2:isBorder}">qwq</div> -->
    <div v-bind={id:mydiv,class:{my_border1:isBorder,my_border2:isBorder}}>qwq</div>

</template>

<style scoped>
button{
    margin-bottom: 10px;
}
.my_border1{
    border:1px solid red
}
.my_border2{
    background-color: burlywood;
}
</style>
